// 导入css(没有导入此文件导致页面滚动失效！！！)
import './App.scss'

// 导入路由
import { Redirect, Route, Switch } from 'react-router-dom'

// 导入页面组件
import Layout from '@/pages/Layout'
import React, { Suspense } from 'react'
import ProfileEdit from './pages/Profile/Edit'
import PrivateRoute from './components/PrivateRoute'
import Chat from './pages/Chat'
import Article from './pages/Article'
import SearchPage from './pages/Search'
import Result from './pages/Search/Result'
import KeepAlive from './components/KeepAlive'

const Login = React.lazy(() => import('@/pages/Login'))

// 配置路由规则
function App() {
  return (
    <div className="app">
      <KeepAlive path="/home">
        <Layout />
      </KeepAlive>
      <Suspense fallback={<span className="code-extra">正在加载中...</span>}>
        <Switch>
          <Route path="/" exact>
            <Redirect to="/home" />
          </Route>
          {/* <Route path="/home" component={Layout}></Route> */}
          <Route path="/login" component={Login}></Route>
          <PrivateRoute path="/profile/edit">
            <ProfileEdit />
          </PrivateRoute>
          <PrivateRoute path="/chat">
            <Chat />
          </PrivateRoute>
          <Route path="/article/:id">
            <Article />
          </Route>
          <Route path="/search" exact>
            <SearchPage />
          </Route>
          <Route path="/search/result">
            <Result />
          </Route>
        </Switch>
      </Suspense>
    </div>
  )
}

export default App
